<template>
  <div style="width: 99%;">
    <el-row :gutter="0">
      <el-col :md="5" :offset-left="0">
        <div class="grid-content bg-purple">
          <el-form ref="form1" :model="form1" label-width="100px">
            <el-form-item label="申请人姓名">
              <el-input v-model="form1.name"></el-input>
            </el-form-item>
            <el-form-item label="预约人数">
              <el-select v-model="value" @change="selectProductType" placeholder="请选择预约人数">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                  :value="{ value: item.value, label: item.label}">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="健康情况" style="text-align: left;">
              <el-checkbox-group v-model="form1.checkList" @change="changeCheckbox1">
                <el-checkbox label="近三天有生病"></el-checkbox><br>
                <el-checkbox label="红码或黄码"></el-checkbox><br>
                <el-checkbox label="最近有出入高风险区"></el-checkbox><br>
                <el-checkbox label="无以上三条"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="选择类型" style="text-align: left;">
              <el-radio v-model="form1.type" :label="0" @change="isHealth1">定点</el-radio>
              <el-radio v-model="form1.type" :label="1">上门</el-radio>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <!--通知部分 -->
      <el-col :span="15" :offset="1" style="line-height: 35px;" v-if="!display2">
        <font size="4" color="red">尊重的用户您好，预约核酸前须知：只能预约第二天核酸，且在晚上20:00截止预约。社区会根据总预约人数向社区医院安排相关医务人员。若总预约人数太少，烦请各位用户自行去医院安排核酸检测工作。</font>
      </el-col>

      <el-col :md="5" :offset="1" v-if="display2">
        <div class="grid-content bg-purple">
          <el-form ref="form2" :model="form2" label-width="100px">
            <el-form-item label="同行人姓名">
              <el-input v-model="form2.name"></el-input>
            </el-form-item>
            <el-form-item label="与申请人关系">
              <el-select v-model="form2.relationship" placeholder="请选择关系">
                <el-option label="父母" value="父母"></el-option>
                <el-option label="姐妹" value="姐妹"></el-option>
                <el-option label="兄弟" value="兄弟"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="健康情况" style="text-align: left;">
              <el-checkbox-group v-model="form2.checkList" @change="changeCheckbox2">
                <el-checkbox label="近三天有生病"></el-checkbox><br>
                <el-checkbox label="红码或黄码"></el-checkbox><br>
                <el-checkbox label="最近有出入高风险区"></el-checkbox><br>
                <el-checkbox label="无以上三条"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="选择类型" style="text-align: left;">
              <el-radio v-model="form2.type" :label="0" @change="isHealth2">定点</el-radio>
              <el-radio v-model="form2.type" :label="1">上门</el-radio>
            </el-form-item>
          </el-form>
        </div>
      </el-col>

      <el-col :md="5" :offset="1" v-if="display3">
        <div class="grid-content bg-purple">
          <el-form ref="form3" :model="form3" label-width="100px">
            <el-form-item label="同行人姓名">
              <el-input v-model="form3.name"></el-input>
            </el-form-item>
            <el-form-item label="与申请人关系">
              <el-select v-model="form3.relationship" placeholder="请选择关系">
                <el-option label="父母" value="父母"></el-option>
                <el-option label="姐妹" value="姐妹"></el-option>
                <el-option label="兄弟" value="兄弟"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="健康情况" style="text-align: left;">
              <el-checkbox-group v-model="form3.checkList" @change="changeCheckbox3">
                <el-checkbox label="近三天有生病"></el-checkbox><br>
                <el-checkbox label="红码或黄码"></el-checkbox><br>
                <el-checkbox label="最近有出入高风险区"></el-checkbox><br>
                <el-checkbox label="无以上三条"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="选择类型" style="text-align: left;">
              <el-radio v-model="form3.type" :label="0" @change="isHealth3">定点</el-radio>
              <el-radio v-model="form3.type" :label="1">上门</el-radio>
            </el-form-item>
          </el-form>
        </div>
      </el-col>

      <el-col :md="5" :offset="1" v-if="display4">
        <div class="grid-content bg-purple">
          <el-form ref="form4" :model="form4" label-width="100px">
            <el-form-item label="同行人姓名">
              <el-input v-model="form4.name"></el-input>
            </el-form-item>
            <el-form-item label="与申请人关系">
              <el-select v-model="form4.relationship" placeholder="请选择关系">
                <el-option label="父母" value="父母"></el-option>
                <el-option label="姐妹" value="姐妹"></el-option>
                <el-option label="兄弟" value="兄弟"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="健康情况" style="text-align: left;">
              <el-checkbox-group v-model="form4.checkList" @change="changeCheckbox4">
                <el-checkbox label="近三天有生病"></el-checkbox><br>
                <el-checkbox label="红码或黄码"></el-checkbox><br>
                <el-checkbox label="最近有出入高风险区"></el-checkbox><br>
                <el-checkbox label="无以上三条"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="选择类型" style="text-align: left;">
              <el-radio v-model="form4.type" :label="0" @change="isHealth4">定点</el-radio>
              <el-radio v-model="form4.type" :label="1">上门</el-radio>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <div style="text-align: left;margin-left: 50px;">
      <el-button type="primary" @click="allSubmit">提交</el-button>
      <el-button style="margin-left: 70px;" @click="cancelSubmit">取消</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //是否停止执行
        flag:true,
        //用户信息，user
        username:"",
        //表单1数据
        form1: {
          name: '',
          number: 1,
          health: 1,
          //健康情况数组
          checkList: [],
          type: NaN,
          relationship: '本人',
          reservation: 0,
          uid:''
        },
        //表单2数据
        form2: {
          name: '',
          number: 0,
          health: 1,
          checkList: [],
          type: NaN,
          relationship: '',
          reservation: 0,
          uid:''
        },
        //表单3数据
        form3: {
          name: '',
          number: 0,
          health: 1,
          checkList: [],
          type: NaN,
          relationship: '',
          reservation: 0,
          uid:''
        },
        //表单4数据
        form4: {
          name: '',
          number: 0,
          health: 1,
          checkList: [],
          type: NaN,
          reservation: 0,
          relationship: '',
          uid:''
        },
        display2: false,
        display3: false,
        display4: false,
        options: [{
          value: 1,
          label: '1人'
        }, {
          value: 2,
          label: '2人'
        }, {
          value: 3,
          label: '3人'
        }, {
          value: 4,
          label: '4人'
        }],
        value: '',
        label: ''
      }
    },
    methods: {
      //提交表单
      allSubmit() {
        //检查今天是否已经预约过了
        this.$axios.get("http://localhost:8080/epidemic/check",{params:{uid:this.username}}).then(res => {
          if(res.data.code!=200){
            this.$message(res.data.msg);
            console.log(res.data.code)
          }else{
            //设置uid
            this.form1.uid=this.username;
            this.form2.uid=this.username;
            this.form3.uid=this.username;
            this.form4.uid=this.username;
            let epi = [this.form1];
            if (this.display4) {
              epi = [this.form1, this.form2, this.form3, this.form4];
            } else if (this.display3) {
              epi = [this.form1, this.form2, this.form3];
            } else if (this.display2) {
              epi = [this.form1, this.form2];
            }
            //发送ajax添加数据
            this.$axios.post("http://localhost:8080/epidemic/add", epi).then(res => {
              console.log(res.data);
              this.$message({
                message:res.data.msg,
                type:'success'
              });
              console.log(this.form1.uid);
            })
          }
        })
      },
      //取消提交
      cancelSubmit() {
        //初始化数据
        //表单1数据
        this.form1 = {
            name: '',
            number: 1,
            health: 1,
            //健康情况数组
            checkList: [],
            type: NaN,
            relationship: '本人',
            reservation: 0,
          },
          //表单2数据
          this.form2 = {
            name: '',
            number: 0,
            health: 1,
            checkList: [],
            type: NaN,
            relationship: '',
            reservation: 0,
          },
          //表单3数据
          this.form3 = {
            name: '',
            number: 0,
            health: 1,
            checkList: [],
            type: NaN,
            relationship: '',
            reservation: 0,
          },
          //表单4数据
          this.form4 = {
            name: '',
            number: 0,
            health: 1,
            checkList: [],
            type: NaN,
            reservation: 0,
            relationship: ''
          },
          this.display2 = false,
          this.display3 = false,
          this.display4 = false,
          this.options = [{
            value: 1,
            label: '1人'
          }, {
            value: 2,
            label: '2人'
          }, {
            value: 3,
            label: '3人'
          }, {
            value: 4,
            label: '4人'
          }],
          value = '',
          label = ''
      },
      //选择定点时判断是否健康
      isHealth1() {
        if (this.form1.health == 0) {
          this.form1.type = 1;
          this.$message("健康情况不太良好，为了您和他人健康，只能选择上门")
          // alert("健康情况不太良好，为了您和他人健康，只能选择上门")
        }
      },
      isHealth2() {
        if (this.form1.health == 0) {
          this.form1.type = 1;
          this.$message("健康情况不太良好，为了您和他人健康，只能选择上门")
          // alert("健康情况不太良好，为了您和他人健康，只能选择上门")
        }
      },
      isHealth3() {
        if (this.form1.health == 0) {
          this.form1.type = 1;
          this.$message("健康情况不太良好，为了您和他人健康，只能选择上门")
          // alert("健康情况不太良好，为了您和他人健康，只能选择上门")
        }
      },
      isHealth4() {
        if (this.form1.health == 0) {
          this.form1.type = 1;
          this.$message("健康情况不太良好，为了您和他人健康，只能选择上门")
          // alert("健康情况不太良好，为了您和他人健康，只能选择上门")
        }
      },

      //选择健康信息
      changeCheckbox1(val) {
        if (val == "无以上三条" || val == null) {
          this.form1.health = 1;
          this.form1.type = NaN;
        } else {
          this.form1.health = 0;
          this.form1.type = 1;

        }
      },
      changeCheckbox2(val) {
        if (val == "无以上三条" || val == null) {
          this.form2.health = 1;
          this.form2.type = NaN;
        } else {
          this.form2.health = 0;
          this.form2.type = 1;
        }
      },
      changeCheckbox3(val) {
        if (val == "无以上三条" || val == null) {
          this.form3.health = 1;
          this.form3.type = NaN;
        } else {
          this.form3.health = 0;
          this.form3.type = 1;
        }
      },
      changeCheckbox4(val) {
        if (val == "无以上三条" || val == null) {
          this.form4.health = 1;
          this.form4.type = NaN;
        } else {
          this.form4.health = 0;
          this.form4.type = 1;

        }
      },
      //选择填写框个数
      selectProductType(data) {
        // 将data对象解构
        const {
          value,
          label
        } = data;
        this.label = label;
        this.value = value;
        this.form1.number = value;
        switch (this.form1.number) {
          case 1:
            this.display2 = false;
            this.display3 = false;
            this.display4 = false;
            break;
          case 2:
            this.display2 = true;
            this.display3 = false;
            this.display4 = false;
            break;
          case 3:
            this.display2 = true;
            this.display3 = true;
            this.display4 = false;
            break;
          case 4:
            this.display2 = true;
            this.display3 = true;
            this.display4 = true;
            break;
        }
      }
    },
    created() {
      this.username= JSON.parse(sessionStorage.getItem("user")).username;
    }
  }
</script>

<style>

</style>
